use yew::prelude::*;
use yew::{props, Callback};

mod user;
// 使用组件
use user::{User, UserProps};

#[function_component(App)]
fn app() -> Html {
    // 需要渲染的字段
    let names = ["admin", "test", "hboot"];

    // 渲染片段
    let names = names.iter().map(|name| {
        html! {
            <p>{format!("{name}")}</p>
        }
    });
    //     .collect::<Html>();
    let active = "active";
    let bool = true;

    let age = use_state(|| 30);
    // 点击更新年龄
    let update_age: Callback<()> = {
        let age = age.clone();
        Callback::from(move |_| age.set(26))
    };
    // let user_props = props! {
    //     UserProps {
    //         age:age,
    //         on_update_age:update_age
    //     }
    // };
    html! {
    //  <User ..user_props />
        <>
            <h1>{"hello, trunk/yew!"}</h1>
            <h2 class={active}>{"good!"}</h2>
            {for names}
            {if bool{
                html!{
                    <span>{"yes"}</span>
                }
            }else{
                html!{
                    <span>{"no"}</span>
                }
            }}

           <User age={*age} on_update_age={update_age} />
        </>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}
